<template>
  <div class="con">
    <!-- 放置内容区 -->
    <div class="contbox6_10" v-if="type == 1">
      <!-- 机构列表 -->
      <p class="titlelist6_10 titles">
        机构管理
        <span style="color: #999; font-size: 16px">
          &nbsp;&nbsp;
          <span style="font-size: 16px; color: #2f2c29">/</span>
          &nbsp;&nbsp; </span
        >机构列表
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form ref="form" :model="form" label-width="80px">
            <div>
              <el-form-item label="机构名称"  style="float: left">
                <el-input v-model="form.name" :maxlength="30" placeholder="请输入机构名称"></el-input>
              </el-form-item>
              <el-form-item label="归属机构" style="float: left">
                <el-input
                  @focus="selectInstitution"
                  readonly
                  placeholder="请输入归属机构"
                  v-model="mechanism"
                ></el-input>
              </el-form-item>

              <el-form-item label="机构ID" style="float: left">
                <el-input v-model="form.uid" placeholder="请输入机构ID" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="归属OEM" style="float: left">
                <el-input
                  v-model="form.oemName"
                  placeholder="请输入归属OEM"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系人" style="float: left">
                <el-input v-model="form.master" style="width: 200px" placeholder="请输入联系人"></el-input>
              </el-form-item>
              <el-form-item label="手机号" style="float: left">
                <el-input
                  maxlength="11"
                  v-model="form.phone"
                  placeholder="请输入手机号"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </div>
            <div class="clearfix">
              <el-form-item label="机构类型" style="float: left">
                <el-select
                  v-model="form.agtType"
                  @change="memberOffice"
                  placeholder="请选择">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="OEM" value="0" v-if="jurisdictionn!=0"></el-option>
                  <el-option label="普通代理" value="1"></el-option>
                  <el-option label="渠道机构" value="3" v-if="jurisdictionn!=0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="状态" style="float: left">
                <el-select v-model="form.status" placeholder="请选择状态">
                  <el-option label="全部" value></el-option>
                  <el-option label="启用" value="0"></el-option>
                  <el-option label="停用" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="实名状态" style="float: left">
                <el-select v-model="form.authStatus" placeholder="请选择状态">
                  <el-option label="全部" value></el-option>
                  <el-option label="已实名" value="0"></el-option>
                  <el-option label="未实名" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="入驻时间" style="float: left">
                <el-date-picker
                  class="time"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期"
                  v-model="form.startDate"
                ></el-date-picker>
                <div class="times">-</div>
                <el-date-picker
                  class="time"
                  v-model="form.endDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="buttons">
          <el-button
            v-if="isAuth('mechanismSearch')"
            type="primary"
            @click="onSubmit"
            >搜索</el-button
          >
          <el-button v-if="isAuth('mechanismReset')" @click="rest"
            >重置</el-button
          >
          <el-button
            class="butt"
            style="float: left; margin-left: 40px"
            type="primary"
            icon="el-icon-plus"
            v-if="isAuth('mechanismAdd')"
            @click="onnew(0)"
            >创建机构</el-button
          >
        </div>


        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          style="width: 98%; margin-bottom: 20px; margin-left: 20px"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" min-width="55"></el-table-column> -->
          <el-table-column
            show-overflow-tooltip
            label="归属OEM"
            min-width="150"
          >
            <template slot-scope="scope">{{ scope.row.oemName }}</template>
          </el-table-column>
          <el-table-column
            prop="parentName"
            label="归属机构"
            show-overflow-tooltip
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="uid"
            label="机构ID"
            min-width="200"
            show-overflow-tooltip
          ></el-table-column>
          <!-- <el-table-column prop="agtType" label="机构类型" width="120"></el-table-column> -->
          <el-table-column
            prop="name"
            label="机构名称"
            min-width="120"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            prop="agtType"
            label="机构类型"
            min-width="80"
            show-overflow-tooltip
          ></el-table-column>

          <!-- <el-table-column
            v-if="jurisdictionn == 2"
            prop="hkproCode"
            label="服务商编号"
            min-width="110"
            show-overflow-tooltip
          ></el-table-column> -->

          <el-table-column
            prop="master"
            label="联系人"
            show-overflow-tooltip
            min-width="90"
          ></el-table-column>
          <el-table-column
            prop="phone"
            show-overflow-tooltip
            label="手机号"
            min-width="110"
          ></el-table-column>
          <el-table-column
            prop="developCode"
            label="邀请码"
            show-overflow-tooltip
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="createDate"
            label="入驻时间"
            show-overflow-tooltip
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="status"
            show-overflow-tooltip
            label="状态"
            width="60"
          ></el-table-column>
          <el-table-column
            prop="authStatus"
            show-overflow-tooltip
            label="实名状态"
            width="80"
          ></el-table-column>
          <!-- <el-table-column
            prop="authStatus"
            v-if="jurisdictionn != 2"
            label="直采权限"
            width="80"
          >
            <template slot-scope="scope">
              <div @click="bigClick(scope.row)">
                <el-switch
                  v-model="scope.row.directFlag"
                  inactive-value="0"
                  active-value="1"
                  @change="changeJur"
                  active-color="#56BB8A"
                  inactive-color="#C0C4CC"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column> -->

          <!-- <el-table-column
            prop="authStatus"
            label="直采签约状态"
            v-if="jurisdictionn == 0"
            width="120"
          >
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.directSignFlag == 0">未签约</div>
                <div v-if="scope.row.directSignFlag == 1">已签约</div>
              </div>
            </template>
          </el-table-column> -->

          <el-table-column label="操作" min-width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                type="text"
                style="color: #f56c6c"
                @click="numDelete(scope.row.uid, 1)"
                v-if="scope.row.status == '启用' && isAuth('mechanismDisabled')"
                >停用</el-button
              >
              <el-button
                type="text"
                @click="numDelete(scope.row.uid, 0)"
                v-if="scope.row.status == '停用' && isAuth('mechanismDisabled')"
                >启用</el-button
              >
              <el-button
                type="text"
                @click="handleEdit(scope.row, scope.row.uid, scope.row.name)"
                v-if="isAuth('mechanismEditor') && scope.row.agtType != '普通代理' && jurisdictionn == '2'"
                >修改</el-button
              >
               <el-button
                type="text"
                @click="detail(scope.row)"
                v-if="isAuth('mechanismDetails')"
                >查看</el-button
              >
              <el-button
                type="text"
                @click="handleEdit(scope.row, scope.row.uid, scope.row.name)"
                v-if="isAuth('mechanismEditor') && scope.row.agtType == '普通代理' && jurisdictionn != '2'"
                >修改</el-button
              >
             
              <el-button type="text" v-if="isAuth('officeConfig') && scope.row.agtType == 'OEM' || scope.row.agtType == '渠道机构'" @click="setConfig(scope.row)">配置</el-button>
              <!-- <el-button type="text" v-if="isAuth('pushSecretKey') && scope.row.agtType == 'OEM'" @click="secret(scope.row)" >推送秘钥</el-button>
              <el-button
                type="text"
                v-if="isAuth('payType') && scope.row.agtType == 'OEM'"
                @click="payment(scope.row)">支付</el-button>
              <el-button
                size="text"
                @click="business(scope.row)"
                v-if="isAuth('mechanismBusiness') && scope.row.agtType == 'OEM'">业务</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: right;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[20, 50, 100]"
          :page-size="form.number"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
        ></el-pagination>
      </div>
    </div>
    <el-dialog width="500px" :close-on-click-modal="false" title="推送秘钥" :visible.sync="dialogVisibles">
      <el-form :model="push" ref="push" :rules="rules" label-width="100px" >
        <el-row>
          <el-Col>
            <el-form-item label="机构名称" >{{push.officeName}}</el-form-item>
          </el-Col>
          <el-col>
            <el-form-item label="服务商编号" >{{push.hkproCode}}</el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="推送地址" >{{push.tradePushUrl}}</el-form-item>
          </el-col>
          <el-col>
            <el-form-item style="width:100%" label="推送秘钥" prop="genKey" >
              <el-input
                v-model="push.genKey"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pushSuccess">完 成</el-button>
        <el-button  @click="dialogVisibles = false">取 消</el-button>
      </div>
    </el-dialog>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>

<script>
// 引入按钮权限
import WEBAPI from "../../assets/js/base.js";
import axios from "axios";
import { officeNameLength } from "../../plugins/rules"
//引入归属机构
import { CompareDate } from "../../assets/js/commion";
import Tree from "../tree/index";
export default {
  name: "route",
  data() {
    return {
      officeNameLength:officeNameLength,
      rules:{
        genKey: [{ required: true, message: "请输入机构秘钥", trigger: "blur" }]
      },
      push:{
      genKey:""
      },
      pushSSH:"",
      dialogVisibles:false,
      jurisdictionn: null,
      mechanismAdd: false,
      jurisdiction1: "1",
      mechanismDetails: false,
      mechanismBsiness: false,
      readonly: true,
      typebox: 0,
      treeBool: false,
      showType: false,
      quanxianBool: 0,
      // 控制直采权限的
      quanxian: "",
      // 签约
      quanxian2: "",
      type: 1,
      mechanism: "",
      currentPage: 1, //默认显示第一页
      pageSize: 10, //默认每页显示10条
      totalNum: 0, //总页数
      msg: [],
      memberTypsText: "",
      memberType: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "OEM"
        },
        {
          value: "1",
          label: "普通代理"
        },
        {
          value: "3",
          label: "渠道机构"
        }
      ],
      newType: "",
      checkedAll: false,
      form: {
        names: "",
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : "", //OEMid
        officeUid: "",
        name: "",
        oemName: "",
        uid: "",
        master: "",
        authStatus: "",
        phone: "",
        parentName: "",
        status: "",
        authStatus: "",
        agtType: "",
        startDate: "",
        endDate: "",
        page: 1,
        number: 20
      },
      tableData: [],
      multipleSelection: []
    };
  },
  created() {
    this.jurisdictionn = localStorage.getItem("jurisdiction");
    localStorage.removeItem("businessInfo11")
    localStorage.removeItem("officeUid11")
    localStorage.removeItem("agtType1s")
    localStorage.removeItem("configure")
    localStorage.removeItem("activeName")
    sessionStorage.removeItem("name")
  },
  mounted() {
    var _this = this;
    _this.typebox = localStorage.getItem("jurisdiction");
    sessionStorage.setItem("huixianid", "");
    _this.getData();
  },
  watch: {
    type: function(newVal, oldVal) {
      //type是data的return返回对象中的数组变量，newVal是属性变化后的值，oldVal是属性变化前的值
      if (newVal == 1) {
        this.getData();
      }
    }
  },
  components: {
    Tree
  },
  methods: {
    // 跳转配置页面
    setConfig(val){
      console.log(val)
      this.$router.push({
        name:"setConfig",
        query:{
          officeUid: val.uid,
          agtType: val.agtType,
          master:val.name,
          businessInfo:JSON.stringify(val)
        }
      })
    },
    // 完成
    pushSuccess(){
      this.$refs["push"].validate(valid => {
        if (valid) {
      axios.post('api/office/save',this.push).then(res=>{
        if(res.data.code=="0000"){
          this.dialogVisibles=false
          this.getData()
          this.push.genKey=""
        }else{
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2 //1秒后自动关闭
          });
          this.dialogVisibles=false
        }
      }).catch(err=>{
        console.log(err)
      })
        }})
    },
    // 秘钥
    secret(val){
      if (this.$refs["push"] !== undefined) {
        this.$refs["push"].resetFields();
      }
      this.pushSSH=val.uid
      axios.post('/api/office/getUpdateOfficeInfo',{officeUid:val.uid}).then(res=>{
        if(res.data.code=="0000"){
          this.push=res.data.data
          this.dialogVisibles=true
          
        }else{
           layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2 //1秒后自动关闭
          });
        }
      })
    },
    // 利用冒泡获取
    bigClick(val) {
      console.log("冒泡");
      console.log(val);
      axios
        .post("api/office/updateDirectFlag", {
          uid: val.uid,
          status: this.quanxian
        })
        .then(res => {
          console.log("权限请求执行");
          console.log(res);
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2 //1秒后自动关闭
          });
          this.getData();
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 控制这个权限
    changeJur(val) {
      console.log("发生了点击");
      console.log(val);
      this.quanxian = val;
      this.bigClick();
    },
    // 直采签约冒泡
    qianyue(val) {
      console.log("利用冒泡");
      axios
        .post("/api/office/updateDirectSignFlag", {
          uid: val.uid,
          status: this.quanxian2
        })
        .then(res => {
          console.log(res);
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2 //1秒后自动关闭
          });
          this.getData();
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 直采签约222
    changeJur2(val) {
      console.log("发生了点击");
      console.log(val);
      this.quanxian2 = val;
      this.qianyue();
      // axios.post("api/office/updateDirectFlag",{})
    },
    memberOffice(val) {
      console.log(val);
    },
    // 支付方式
    payment(val) {
      this.$router.push({
        path: "paymentMethod",
        query: {
          officeUid: val.uid,
          agtType: val.agtType
        }
      });
    },
    // 重置
    rest() {
      this.form.uid = "";
      this.form.oemName = "";
      this.form.officeUid = "";
      this.mechanism = "";
      this.form.phone = "";
      this.form.startDate = "";
      this.form.endDate = "";
      this.form.agtType = "";
      this.form.page=1
      this.form.status = "";
      this.form.name = "";
      this.form.master = "";
      this.form.authStatus = "";
      this.getData()
    },
    //   归属机构点击
    transmit(data) {
      //归属机构的uid
      this.form.officeUid = data.uid;
      //归属机构名字
      this.mechanism = data.name;
    },
    // 选择普通代理和oem
    handleEdit(val, id, name) {
      var id = id;
      console.log(val);
      sessionStorage.setItem("huixianid", val.uid);
      sessionStorage.setItem("huinbian", "编辑");
      let type = val.agtType == "普通代理" ? 0 : 2;

      sessionStorage.setItem("newType", type);
      sessionStorage.setItem("selectDisbled", 0);
      this.type = 3;
      this.$router.push({
        path: `create`,
        query: {
          showBool: 2,
          list: val.agtType,
          id: val.oemUid
        }
      });
    },
    // 控制停用启用按钮
    numDelete(n, s) {
      var _this = this;

      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/office/changeStatus",
          data: {
            uid: n,
            status: s
          }
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time: 2 //1秒后自动关闭
            });
            _this.getData();
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time: 2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    // 创建机构
    onnew(type) {
      sessionStorage.setItem("huixianid", "");
      sessionStorage.setItem("huinbian", "创建");
      sessionStorage.setItem("newType", type);
      this.type = 3;
      sessionStorage.setItem("selectDisbled", 1);
      sessionStorage.setItem("shol", 1);
      this.$store.commit("setSw", 1);
      this.$router.push({
        path: "create",
        query: {
          showBool: 1
        }
      });
    },
    // 业务
    business(val) {
      this.$router.push({
        path: "business",
        query: {
          businessInfo: JSON.stringify(val)
        }
      });
    },
    // 校验时间的一个方法
    warrys() {
      layer.open({
        content: "结束时间不能早于开始时间",
        skin: "msg",
        time: 2 //1秒后自动关闭
      });
    },
    // 提价
    onSubmit() {
      this.form.page = 1;

      let bool = CompareDate(this.form.startDate, this.form.endDate);
      if (this.form.startDate != "" && this.form.endDate != "") {
        if (bool) this.getData();
        else this.warrys();
      } else {
        this.getData();
      }
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/15
     * @annotation: 全选
     **/
    selAll() {
      if (this.checkedAll) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 列表
    getData() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/office/list",
          data: _this.form
        })
        .then(function(d) {
          console.log("下面是列表数据");
          console.log(d);
          if (d.data.code == "0000") {
            _this.tableData = d.data.data;
            for (var s = 0; s < _this.tableData.length; s++) {
              _this.tableData[s].authStatus =
                _this.tableData[s].authStatus == 0 ? "已实名" : "未实名";
              _this.tableData[s].status =
                _this.tableData[s].status == 0 ? "启用" : "停用";
              _this.tableData[s].agtType =
                _this.tableData[s].agtType == 0 ? "OEM" : _this.tableData[s].agtType==1?"普通代理":"渠道机构";
            }

            _this.totalNum = d.data.total;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time: 2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    //分页类型
    handleSizeChange(val) {
      this.form.number = val; //动态改变
      this.form.page = 1;
      this.getData();
    },
    handleCurrentChange(val) {
      /* alert(`当前页: ${val}`);*/

      this.form.page = val; //动态改变
      this.getData();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // table表格的
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    showdou() {
      this.$refs.mychild.parentHandleclick();
    },
    // 搜索
    mechanisms() {
      var uid = localStorage.getItem("uid");
      this.axios({
        method: "post",
        url: "/api/office/queryOfficeList",
        data: { uid: uid }
      })
        .then(res => {
          console.log(res);
        })
        .catch(function(error) {});
    },
    // 选择归属机构
    selectInstitution() {
      this.showType = true;
    },
    //树的确定按钮
    determine() {
      this.showType = false;
    },
    // 查看详情
    detail(val) {
      console.log(val);
      this.$router.push({
        path: `mechanismDetail/${val.uid}`
      });
    }
  }
};
</script>

<style scoped>
/deep/ .el-container[data-v-4d4a7ce2] {
  background: #f5f7fa !important;
  height: 100% !important;
}
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.titlelist6_10 {
  position: absolute;
  padding-left: 20px;
  height: 36px;
  background: #fff;
  width: 100%;
  float: left;
  line-height: 36px;
  font-size: 16px;
  color: #222;
  border-bottom: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
}
.content {
  float: left;
  margin-top: 200px;
  margin-bottom: 0px;
  margin: 36px 0px 0px;
  height: calc(100vh - 100px - 26px);
  background: #fff;
}
.buttons {
  width: 100%;
  float: left;

  border: none;
  margin-bottom: 10px;
}
.buttons .el-button {
  float: left;
  padding: 7px;
}
.sousuojg6_10 {
  float: left;
  box-sizing: border-box;
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  border-radius: 5px;
}
.el-form-item {
  margin-bottom: 10px;
}
.time {
  width: 136px !important;
}
.time > .el-input__inner {
  width: 100% !important;
}
.times {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.el-col-1 {
  width: 3%;
}
.nav {
  width: 100%;
  display: flex;
}
.clearfix:after {
  display: block;
  height: 0;
  clear: both;
  content: ".";
  visibility: hidden;
}
.titles {
  font-size: 16px;
  /* font-weight: bold; */
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
.subTtile {
  font-size: 18px;
  font-weight: bold;
}
.titlesSub {
  font-size: 18px;
  font-weight: bold;
  width: 80px;
  display: inline-block;
}
.exports {
  color: #409eff;
  border-color: #409eff;
}

.butt {
  background: #f5f7fa;
  color: #409eff;
}
/deep/ .el-textarea__inner{
  height:160px
}
</style>
